import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Alert, Card, Typography, Tabs, Form, Row, Col, Input, Button, message, Table, Popconfirm, Modal, Select, DatePicker, } from 'antd';
const { TabPane } = Tabs;
import React, { useRef, useState, useEffect, } from 'react';
import { getUserInformation, setUserInformation, getNurseList, delUserInformation, getDeptList, getPatientList, } from '@/services/ant-design-pro/api';
import * as echarts from 'echarts';
import moment from 'moment';
import { cloneDeep } from 'lodash';
const { RangePicker } = DatePicker;


const Echarts: React.FC = () => {
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [deptList, setDeptList] = useState([]); //部门
  const [getParams, setGetParams] = useState({
    name: "", MachineSN: "",
    deptId: "",
    admitTimeStart: moment().startOf('month').format('YYYY-MM-DD'),
    admitTimeEnd: moment().endOf('month').format('YYYY-MM-DD'),
  });


  const getChange = (type: any, values: any) => {
    let getParamsNew: any = cloneDeep(getParams)
    if (type == "name" || type == "MachineSN") {
      getParamsNew[type] = values.target.value
    } else if (type == "deptId") {
      getParamsNew[type] = values
    } else if (type == "admitTime" && Array.isArray(values) && values.length > 1) {
      getParamsNew["admitTimeStart"] = moment(values[0]).format('YYYY-MM-DD')
      getParamsNew["admitTimeEnd"] = moment(values[1]).format('YYYY-MM-DD')
    }
    setGetParams({ ...getParamsNew, })
  }
  const getDeptListApi = () => {
    getDeptList({
      username: localStorage.getItem("username") || "",
    }).then(async (res: any) => {
      setDeptList(res.data)
    })
  }
  useEffect(() => {
    getPatientListOnClick()
  }, [deptList])
  const getPatientListOnClick = () => {
    getPatientList(getParams).then(async (res: any) => {
      await setDataSource(res.data)
      await getEcharts()
    })
  }
  const getEcharts = () => {
    let newDeptList = Array.isArray(deptList) && deptList.map((item: any) => {
      return {
        ...item,
        value: 0,
        name: item.deptName,
      }
    })
    if (Array.isArray(newDeptList) && Array.isArray(dataSource)) {
      newDeptList.map((item: any) => {
        dataSource.map((item2: any) => {
          if (item.deptId == item2.deptId) {
            item.value++
          }
        })
      })
    }
    let chartDom = document.getElementById('main');
    let myChart = echarts.init(chartDom);
    let option = {
      title: {
        text: '各部门问题占比',
        // subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '50%',
          data: newDeptList,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    return myChart.setOption(option)
  }

  useEffect(() => {
    getDeptListApi()
  }, [])
  // const { token } = theme.useToken();
  // const { initialState } = useModel('@@initialState');
  return (
    <div>
      <Row>
        <Col span={4}>
          <Form.Item label="客户名称" labelCol={{ span: 9 }} wrapperCol={{ span: 14 }}>
            <Input placeholder='请输入客户名称' onChange={(e) => getChange("name", e)} value={getParams.name} />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="机器sn" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            <Input placeholder='请输入' onChange={(e) => getChange("MachineSN", e)} value={getParams.MachineSN} />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item label="部门" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            <Select
              placeholder='请选择部门'
              onChange={(e) => getChange("deptId", e)} value={getParams.deptId}
            >
              <Option value={""}>全部</Option>
              {Array.isArray(deptList) && deptList.map((item: any) => {
                return <Option value={item.deptId}>{item.deptName}</Option>
              })}

            </Select>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="报修日期" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
            <RangePicker onChange={(e) => getChange("admitTime", e)}
              allowClear={false}
              value={[
                getParams.admitTimeStart ? moment(getParams.admitTimeStart) : null,
                getParams.admitTimeEnd ? moment(getParams.admitTimeEnd) : null
              ]} />
          </Form.Item>
        </Col>
        <Col span={4} style={{ position: 'relative' }}>
          <Form.Item style={{ position: 'absolute', right: 0, width: '100%' }} wrapperCol={{ span: 24 }}>
            <Button type="primary" style={{ marginRight: 10 }} onClick={getPatientListOnClick}>查询</Button>
          </Form.Item>
        </Col>
      </Row>
      <div id='main' style={{ height: 400, width: 500 }}></div>
    </div>
  );
};

export default Echarts;
